<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="net.groupme.gui.constants.VIEW_VOCABULARY"%>
<%@page import="net.groupme.api.API_CONSTANTS"%>
<%@page import="net.groupme.gui.rendering.constants.RENDERING_CONSTANTS"%>

<%@page import="net.groupme.model.MODEL_CONSTANTS"%><html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- meta tags, link to css:  -->
	<%@ include file="./jsp-includes/mymetaheader.jsp" %>

	<meta name="keywords" content="<c:out value='${taglistAsString}'></c:out>"/>
	<meta name="description" content="<c:out value='${descriptionString}'></c:out>"/>
	<c:forEach items="${groupManager.group.resources}" var="res" varStatus="status">
		<meta name="DC.relation" content="<c:out value='${res.URL}'/>"/>
	</c:forEach>
	
	<title><c:out value="${groupManager.group.name}" ></c:out>  [GroupMe! group]</title>
	
	<!--  Ajax Scripts -->
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRSearchManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRGroupManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRUserManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRResourceAggregation.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRSearchResultRenderer.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRResourceRenderer.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/interface/DWRGroupBrowsingManager.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/engine.js'></script>
	<script type='text/javascript' src='<%= request.getContextPath()%>/dwr/util.js'></script>
	<script src="<%= request.getContextPath()%>/scriptaculous/prototype.js" type="text/javascript"></script>
	<script src="<%= request.getContextPath()%>/scriptaculous/scriptaculous.js" type="text/javascript"></script>

	<script type="text/javascript" src="<%= request.getContextPath()%>/highslide/highslide.js"></script>
	<script type="text/javascript">   <!--
	    hs.graphicsDir = '<%= request.getContextPath()%>/highslide/graphics/';
	    hs.outlineType = 'rounded-white';
	    hs.outlineWhileAnimating = true;
	    hs.marginRight = 450;
	    //-->
	</script>

	<!-- GroupMe! stuff -->
	<script type="text/javascript" src="<%= request.getContextPath()%>/groupme_js/groupme_groupedit.js"></script>
	<%@ include file="./jsp-includes/groupResourceLoadingRendering.jsp" %>
	<%@ include file="./jsp-includes/resourceResizingMoving.jsp" %>
	<%@ include file="./jsp-includes/resource_search.jsp" %>
	<script type="text/javascript" language="javascript"><!--
	//<![CDATA[//>
		
		/** the Id of the group currently selected */
		var currentGroupId = 0;
	 	var initialSearchKeywords;
   		//init stuff:		
		function init() {
			mousedown = 0;
			isMouseDownOnSearchResult = false;
			zAxisIndicator = 50;
// 			Loading-Layer:
//			DWRUtil.useLoadingMessage();
			currentGroupId = <c:out value="${id}"/>;
			loadGroup('<c:out value="${id}"/>');
			initialSearchKeywords='<c:out value="${groupManager.group.name}"/>';
//			<c:forEach items="${groupManager.group.tags}" var="tag" varStatus="status">
//			initialSearchKeywords+=" <c:out value='${tag.keyword}'/>";
//			</c:forEach>
			dwr.util.setValue("searchkeywordsinput", initialSearchKeywords);
			reloadTagCloud();
			searchForResources();
			toggleSearchResults('imageSearchResult');
		}
		
	//<!]]>
//-->
</script>
</head>
<body onload="init()" onmousemove="resize2(event);" onmouseup="resize3();">
	<!-- title image, logo:  -->
	<!-- title image, logo:  -->
	<div id="groupme_header">
		<%@ include file="./jsp-includes/groupme_header.jsp" %>
	</div>
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="./jsp-includes/groupme_menu.jsp" %>
	</div>
	<!-- content and sidebar -->
<c:choose>
	<c:when test="${userManager.loggedIn && groupManager.groupID!=null && (groupManager.ownerOfGroup || groupManager.editorOfGroup)}">
	<div id="main">
		<!-- Search Sidebar (aggregating new resources into GroupMe!) -->
		<!-- Content: -->
	
		<div id="groupContent">
			<div class="ro_w">
				<div class="lo_w">
					<div class="ru_w">
						<div class="lu_w">	
							<div id="titelAndButtons" style="height:37px; margin-left:5px; margin-right:10px; margin-bottom: 5px;">
								<table style="float:left; font-size:25px">
									<tr>
										<td style="vertical-align:middle">
											<span id="groupNameField"><c:out value="${groupManager.group.name}"/></span>
											<a id="groupRenameButton" style="font-size: 0.3em;" href="javascript:showGroupTextfield()" title="Rename GroupMe! Group">edit</a>
											<input id="groupSaveRenameButton" type="button" style="display:none; width:4em;" value="save" onclick="saveNewGroupName(<c:out value="${groupManager.group.id}"/>)" title="Save new GroupMe! Group name"/>
										</td>
									</tr><!--
									<tr>
										<td>
											<span id="groupDescriptionField" style="font-size:0.7em"><c:out value="${groupManager.group.description}"/></span>
											<a id="editDescriptionButton" style="font-size: 0.6em;" href="javascript:editGroupDescription()" title="Edit GroupMe! Group description">edit</a>
											<input id="groupSaveDescriptionButton" type="button" style="display:none; width:4em;" value="save" onclick="saveNewGroupDescription(<c:out value="${groupManager.group.id}"/>)" title="Save new GroupMe! Group description"/>
										</td>
									</tr>
								--></table>
								<c:if test="${userManager.loggedIn}">
									<div id="addTagInputField">
										<input id="addTagToGroupField" class="inputField" type="text" name=addTagToGroup value="" size="18" maxlength=""/>
										<input id="addTagToGroupButton" class="inputFieldButton" type="submit" value="add Tag" onclick="addTagToGroup()"/>
									</div>
								</c:if>		 
								<div id="allButtons">
									<a id="exportRDF" href="" target="GroupMe! RDF-Export" title="Export GroupMe! Group to RDF">
										<img src="<%= request.getContextPath() %>/images/rdf-48x48.gif" height="24px" width="24px" style="text-decoration:none;border:none;"/>
									</a>
									<a id="exportRSS" href="" target="GroupMe! RSS-Export" title="Export GroupMe! Group to RSS">
										<img src="<%= request.getContextPath() %>/images/rss-48x48.gif" height="24px" width="24px" style="text-decoration:none;border:none;"/>
									</a>
								</div>	
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="ro_w">
				<div class="lo_w">
					<div class="ru_w">
						<div class="lu_w">	
							<div style="margin-bottom: 5px; padding-left: 7px;">
								<span id="groupDescriptionField" style="font-size:0.7em; padding-top: 1px;"><c:out value="${groupManager.group.description}"/></span>
								<a id="editDescriptionButton" style="font-size: 0.6em;" href="javascript:editGroupDescription()" title="Edit GroupMe! Group description">edit</a>
								<input id="groupSaveDescriptionButton" type="button" style="display:none; width:4em;" value="save" onclick="saveNewGroupDescription(<c:out value="${groupManager.group.id}"/>)" title="Save new GroupMe! Group description"/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="mainGroupWindow">
				<div class="ro_w">
					<div class="lo_w">
						<div class="ru_w">
							<div class="lu_w">	
								<div id="group">
									<script type="text/javascript"> 
										Droppables.add('group', {onDrop:itemDropped});
									</script>
								</div>	
								<div id="bigtagcloud">	
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="rightGroupSidebar">
				<div class="ro_bw">
					<div class="lo_bw">
						<div class="ru_bw">
							<div class="lu_bw">
								<div id="groupSidebarContent" style="font-size: 0.8em">
									<form action="javascript:searchForResources()" name="searchChooser">
									Search for resources:<br/><br style="font-size: 0.2em"/>
									<input type="text" id="searchkeywordsinput" style="font-size:0.9em" value=" maxlength="255" size="18"/>
									<input id="submitSearchButton" style="font-size:0.9em" type="submit" value="search"/>
									</form>
									<form action="">
									  <p style="font-size: 0.85em">Enable preview on mouseover:
									    <input type="checkbox" id="showPreviewCheck" name="showPreview" value="show" checked>
									  </p>
									</form>
									<div style="width:190px; text-align:center; margin-top:2px; margin-bottom:1px;">
										<input id="manualAddResource" style="font-size:0.9em;" type="button" value="Add a resource manually" onclick="return hs.htmlExpand(this, { src: '<%= request.getContextPath()%>/groupme_manual_add.jsp', contentId: 'my-content', objectType: 'ajax'} )"/>
									</div>
									<!-- menu tabs imagemaps -->
									<img id="htmlSearchResultTab" src="<%= request.getContextPath() %>/images/TabMenu/tab_menu_neu_websites.gif" style="margin-left:-4px; width:198px; height:55px; border:0; display:block" alt="" usemap="#tab_menu_neu_websites_map"/>
									<img id="imageSearchResultTab" src="<%= request.getContextPath() %>/images/TabMenu/tab_menu_neu_images.gif" style="margin-left:-4px; width:198px; height:55px; border:0; display:none" alt="" usemap="#tab_menu_neu_websites_map"/>
									<img id="rssSearchResultTab" src="<%= request.getContextPath() %>/images/TabMenu/tab_menu_neu_rss.gif" style="margin-left:-4px; width:198px; height:55px; border:0; display:none" alt="" usemap="#tab_menu_neu_websites_map"/>
									<img id="avSearchResultTab" src="<%= request.getContextPath() %>/images/TabMenu/tab_menu_neu_audiovideo.gif" style="margin-left:-4px; width:198px; height:55px; border:0; display:none" alt="" usemap="#tab_menu_neu_websites_map"/>
									<img id="groupmeSearchResultTab" src="<%= request.getContextPath() %>/images/TabMenu/tab_menu_neu_groupme.gif" style="margin-left:-4px; width:198px; height:55px; border:0; display:none" alt="" usemap="#tab_menu_neu_websites_map"/>
									<img id="resourceQueueTab" src="<%= request.getContextPath() %>/images/TabMenu/tab_menu_neu_queue.gif" style="margin-left:-4px; width:198px; height:55px; border:0; display:none" alt="" usemap="#tab_menu_neu_websites_map"/>
									<map name="tab_menu_neu_websites_map">
										<area shape="poly" alt="" coords="1,54, 43,3, 46,3, 59,14, 26,54" href="javascript:toggleSearchResults('htmlSearchResult')">
										<area shape="poly" alt="" coords="130,54, 172,3, 175,3, 188,14, 155,54" href="javascript:toggleSearchResults('resourceQueue')">
										<area shape="poly" alt="" coords="105,54, 147,3, 150,3, 163,14, 130,54" href="javascript:toggleSearchResults('groupmeSearchResult')">
										<area shape="poly" alt="" coords="79,54, 121,3, 124,3, 137,14, 104,54" href="javascript:toggleSearchResults('avSearchResult')">
										<area shape="poly" alt="" coords="53,54, 95,3, 98,3, 111,14, 78,54" href="javascript:toggleSearchResults('rssSearchResult')">
										<area shape="poly" alt="" coords="27,54, 69,3, 72,3, 85,14, 52,54" href="javascript:toggleSearchResults('imageSearchResult')">
									</map>
									<!-- end menu tabs imagemaps  -->
									<br style="font-size: 0.2em"/>
									<div id="htmlSearchResult" class="searchResultList" style="display:block">
									</div>
									<div id="imageSearchResult" class="searchResultList" style="display:none">
									</div>
									<div id="avSearchResult" class="searchResultList" style="display:none">
									</div>
									<div id="rssSearchResult" class="searchResultList" style="display:none">
									</div>
									<div id="groupmeSearchResult" class="searchResultList" style="display:none">
										<p id="groupmeSearchResultHead">
											<small>
											<strong>Show:</strong> <a style='margin-left: 1em; margin-right: 1em' href='javascript:showGroupResults()'>Groups</a>
											<a href='javascript:showResourceResults()'>Resources</a>
											</small>
											<hr/>
										</p>
										<div id="groupmeSearchResultGroups" style="display:none; height: 485px;"></div>
										<div id="groupmeSearchResultResources" style="display:block; height: 485px;"></div>
									</div>
									<div id="resourceQueue" class="searchResultList" style="display:none">
										<c:choose>
											<c:when test="${userManager.queueOfUserEmpty}">
											<p style="font-size:0.8em; margin-top:1em;"><i>At the moment your resource queue is empty :)</i></p>
											</c:when>
											<c:otherwise>
												<c:forEach items="${userManager.resourcesOfQueue}" var="resource" varStatus="status">
													<div id="${resource.URL}"
													<c:choose>
														<c:when test="((status.count % 2)==0)"> 
															class="searchResultT"
														</c:when>
														<c:otherwise>
															class="searchResultB"
														</c:otherwise>
													</c:choose>
														<c:choose>
															<c:when test="${resource.type == 'image'}">
																style='position:relative; height:90px; overflow:hidden; margin-right:2px; margin-left:2px; margin-top:3px' 
																onmousedown='mouseDownOnSearchResult()' onmouseup='mouseUpOnSearchResult()' onmouseout='mouseOutOfImageSearchResult()'>
																<div class='thumbwrapper'>
																	<a id='thumb${resource.URL}' href='#' class='highslide' onmouseover='openImagePrev(this, "${resource.URL}", "${resource.URL}")'>
																		<img src='${resource.URL}' border='0' width='120px' class='highslide'/>
																	</a>
																</div>
															</c:when>
															<c:when test="${resource.type == 'shockwave'}">
																style="position:relative;" onmousedown='mouseDownOnSearchResult()' onmouseup='mouseUpOnSearchResult()'>
																<a href='#' id='iframetest' class='highslide' onmouseover='openMMPrev(this, "${resource.URL}", "${resource.URL}"' onmouseout='mouseOutOfSearchResult()'>
																${resource.name}
																</a>
																<div class='highslide-html-content' id='${resource.URL}' style='width: 444px; max-width:840px; padding:0'>
																	<div style='height:20px; padding: 2px; font-size: 0.6em;'>
																		<a href='#' onclick='return hs.close(this)' class='control'>Close</a>
																	</div>
																	<div class='highslide-body' style='padding: 0 10px 10px 10px'>
																		<object width='425' height='344'>
																			<param name='movie' value='${resource.URL}'></param>
																			<param name='allowFullScreen' value='true'></param>
																			<param name='autostart' value='true'></param>
																			<embed src='${resource.URL}&autoplay=1' type='application/x-shockwave-flash' allowfullscreen='true' autostart='true' width='425' height='344'></embed>
																		</object>
																	</div>
																</div>
															</c:when>
															<c:otherwise>
																style="position:relative;" onmousedown='mouseDownOnSearchResult()' onmouseup='mouseUpOnSearchResult()' onmouseout='mouseOutOfSearchResult()'>
																<a href='#' onmouseover='openhtmlPrev(this, "${resource.URL}", "${resource.URL}")' id='iframetest' class='highslide'>
																	${resource.name}
																</a>
															</c:otherwise>
														</c:choose>
													</div>
												</c:forEach>
											</c:otherwise>
										</c:choose>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</c:when>
	<c:otherwise>
		<script language="javascript"> <!--
			window.location='<%= request.getContextPath() %>/groupme_home.jsp'; 
			//-->
		</script>
	</c:otherwise>
</c:choose>
	<div id="footer">
		<%@ include file="./jsp-includes/footer.jsp" %>
	</div>
</body>
</html>